import React from 'react'
import Link from 'next/link'

import '../static/style/components/header.scss'

import {Row, Col, Menu} from 'antd'

const Header = () => (
  <div className="header">
    <Row type="flex" justify="center">
        <Col  xs={24} sm={24} md={10} lg={12} xl={10}>
            <span className="header-logo">Lbxin</span>
            <span className="header-txt">专注前端开发</span>
        </Col>

        <Col className="memu-div" xs={0} sm={0} md={14} lg={8} xl={6}>
            <Menu  mode="horizontal">
                <Menu.Item key="home">
                    {/* <Icon type="home" /> */}
                    <Link href='/index'>
                        <a>
                           首页 
                        </a>
                    </Link>
                    
                </Menu.Item>
                <Menu.Item key="video">
                    {/* <Icon type="youtube" /> */}
                    <Link href={{pathname:'/share'}}>
                        <a>
                            分享 
                        </a>
                    </Link>
                </Menu.Item>
                <Menu.Item key="music">
                    {/* <Icon type="youtube" /> */}
                    <Link href={{pathname:'/music'}}>
                        <a>
                            音乐 
                        </a>
                    </Link>
                </Menu.Item>
                <Menu.Item key="life">
                    {/* <Icon type="smile" /> */}
                    生活
                </Menu.Item>
            </Menu>
        </Col>
    </Row>
  </div>
)

export default Header
